<!-- 修改个人信息 -->
<template>
	<view class="container fs28" :style="{height:screenHeight+'px'}">
		<view class="headBox">
			<view class="personalHead-box flex-sp-between flex-display flex-items">
				<label>头像</label>
				<image class="user-headImg" v-if="item.headImage" :src="item.headImage"></image>
				<image class="user-headImg" v-else src="https://ceres.zkthink.com/static/img/user/morentouxiang.png">
				</image>
			</view>
		</view>
		<view class="personalBack-box flex-items-plus flex-column">
			<view class="personalHead-box flex-sp-between flex-display flex-items">
				<label>手机号</label>
				<label class="font-color-333" style="font-weight: bold;">{{phone}}</label>
			</view>
			<view class="personalHead-box flex-sp-between flex-display flex-items">
				<label>年龄</label>
				<label class="font-color-333" style="font-weight: bold;">{{item.age}}</label>
			</view>
			<view class="personalHead-box flex-sp-between flex-display flex-items">
				<label>性别</label>
				<label class="font-color-333" style="font-weight: bold;">{{item.sex}}</label>
			</view>
			<view class="personalHead-box flex-sp-between flex-display flex-items">
				<label>所在部门</label>
				<label class="font-color-333" style="font-weight: bold;">{{userInfo.deptName}}</label>
			</view>
			<view class="personalHead-box flex-sp-between flex-display flex-items" @click="jumpInfo">
				<label>身体数据</label>
				<image style="width: 60upx;height: 60upx;" src="../../static/images/right.png" mode=""></image>
			</view>
			<view class="personalHead-box flex-sp-between flex-display flex-items" @click="changePasswprd">
				<label>支付密码</label>
				<image style="width: 60upx;height: 60upx;" src="../../static/images/right.png" mode=""></image>
			</view>
			<view class="personalHead-box flex-sp-between flex-display flex-items" @click="protocol('app_privacy_agreement')">
				<label>用户隐私协议</label>
				<image style="width: 60upx;height: 60upx;" src="../../static/images/right.png" mode=""></image>
			</view>
			<view class="personalHead-box flex-sp-between flex-display flex-items" @click="protocol('app_user_agreement')">
				<label>用户服务协议</label>
				<image style="width: 60upx;height: 60upx;" src="../../static/images/right.png" mode=""></image>
			</view>
		</view>
		<view class="mar-top-100">
			<view class="exitLoginBut  flex-items-plus" @click="quit">退出登录</view>
			<!-- #ifdef APP-PLUS -->
			<view class="cancellation" @click="cancellation">注销账号</view>
			<!-- #endif -->
		</view>


		<!-- 修改性别弹窗 -->
		<u-select v-model="sexShow" title="修改性别" :list="sexList" @confirm="ConfirmSex"></u-select>
		<!-- 修改生日弹窗 -->
		<u-picker v-model="timeShow" mode="time" title="修改生日" :params="params" start-year="1970" @confirm="ConfirmTime">
		</u-picker>
		<!-- <view>
			<u-popup v-model="sexShow" mode="center" close-icon-size ="20" border-radius="10" :closeable='true' close-icon-pos = "top-right">
				<view class="flex-items-plus flex-column">
					<label class="mar-top-50 fs-bold">性别</label>
					<u-radio-group class="sexRadio-box flex-items-plus flex-column" v-model="item.sex" @change="sexRadioGroupChange">
						<u-radio class="sexRadio"
							v-for="(item, index) in sexList" :key="index"
							:name="item.id"
							:disabled="item.disabled"
							active-color="#EFB257"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</u-popup>
		</view> -->
	</view>
</template>

<script>
	const NET = require('../../utils/request')
	const API = require('../../config/api')
	export default {
		data() {
			return {
				userInfo:{},
				screenHeight: 0,
				birthdateShow: false,
				mode: 'date',
				birthday: '',
				// sexList: [{
				// 	id: 1,
				// 	name: '男',
				// 	disabled: false
				// }, {
				// 	id: 2,
				// 	name: '女',
				// 	disabled: false
				// }],
				sexShow: false,
				timeShow: false,
				item: {},
				UpdateInfoQuery: {
					headimg: '',
					sex: '',
					nickname: ''
				},
				code: '',
				phone: '',
				name: '',
				sexList: [{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				],
				params: { // 日期
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
			}
		},
		onLoad() {
			this.GetUser()
			this.userInfo = uni.getStorageSync('storage_key');
		},
		mounted() {
			// 获取手机的屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.screenHeight = res.screenHeight
				}
			})
		},
		methods: {
			jumpInfo(){
				uni.navigateTo({
					url:'/pages_category_page1/tabbar/measure/measureInfo'
				})
			},
			changePasswprd(){
				uni.navigateTo({
					url:'/pages_category_page2/userModule/changePassword'
				})
			},
			// 多商户用户协议
			protocol(type) {
				uni.navigateTo({
					url: 'protocol?type=' + type
				})
			},
			cancellation() {
				uni.showModal({
					title: "温馨提示",
					content: "是否注销此账号！",
					confirmText:"前往注销",
					success(res) {
						if (res.cancel) {
							uni.showToast({
								icon: 'none',
								title: '已取消'
							})
						} else if (res.confirm) {
							uni.navigateTo({
								url: 'unsubscribe'
							})
						}
					}
				})
			},
			// 修改生日
			changeTime() {
				if (this.birthday == '1970-01-01' || this.birthday == '') {
					this.timeShow = true
				}
			},
			// 修改昵称
			changeName() {
				const newName = this.name || this.phone
				if (!newName) {
					uni.showToast({
						title: '请输入新的内容',
						icon: "none"
					})
					return false
				}
				uni.showLoading({
					mask: true,
					title: "正在加载中"
				})
				NET.request(API.UpdateUser, {
					name: newName
				}, 'POST').then(res => {
					this.GetUser()
					uni.hideLoading()
					uni.showToast({
						title: '修改成功',
						icon: "success"
					})
				}).catch(res => {
					uni.hideLoading()
				})
			},
			// 提交修改生日
			ConfirmTime(content) {
				if (this.birthday == '1970-01-01' || this.birthday == '') {
					let birthday = content.year + '-' + content.month + '-' + content.day
					uni.showLoading({
						mask: true,
						title: "正在加载中"
					})
					NET.request(API.UpdateUser, {
						birthday
					}, 'POST').then(res => {
						this.GetUser()
						uni.hideLoading()
						uni.showToast({
							title: '修改成功',
							icon: "success"
						})
					}).catch(res => {
						uni.hideLoading()
					})
				}
			},
			// 点击弹窗修改性别
			sexShowClick() {
				this.sexShow = true
			},
			// 提交修改性别
			ConfirmSex(content) {
				uni.showLoading({
					mask: true,
					title: "正在加载中"
				})
				let sex = content[0].label
				NET.request(API.UpdateUser, {
					sex
				}, 'POST').then(res => {
					this.GetUser()
					uni.hideLoading()
					uni.showToast({
						title: '修改成功',
						icon: "success"
					})
				}).catch(res => {
					uni.hideLoading()
				})
			},
			// 获取用户信息
			GetUser() {
				NET.request(API.GetUser, {}, 'GET').then(res => {
					this.item = res.data
					this.phone = res.data.phone
					this.name = res.data.name
					this.birthday = res.data.birthday
				}).catch(res => {

				})
			},
			userHeadTap() {
				return
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (res) => {}
				})
			},
			//生日
			birthdateChange(e) {
				return
				this.item.birth = e.result
			},
			// 性别
			sexRadioGroupChange(e) {
				return
			},
			quit() {
				uni.showLoading({
					mask: true,
					title: '正在退出...',
					duration: 2000,
				});
				setTimeout(function() {
					uni.removeStorageSync('storage_key');
					uni.removeStorageSync('distributorId');
          uni.removeStorageSync("allCartNum")
					uni.reLaunch({
						url: 'login',
						success() {
							uni.hideLoading()
						}
					})
				}, 1000)
			},
			onGetAuthorize() {
				const that = this
				uni.showLoading({
					mask: true,
					title: '验证中...',
				})
				my.getPhoneNumber({
					success: (res) => {
						let encryptedData = res.response;
						console.log('encryptedData:', encryptedData)
						NET.request(API.UpdateAliPhone, {
							'phone': encryptedData
						}, 'POST').then(res => {
							console.log('UpdateAliPhone res: ', res)
							const item = res.data
							uni.setStorageSync('storage_key', item);
							that.phone = item.phone
							uni.hideLoading()
						}).finally(res => {
							uni.hideLoading()
						})
					},
					fail: (res) => {
						console.log('getPhoneNumber failed', res);
						uni.hideLoading()
						uni.showToast({
							title: '验证失败',
							icon: 'none'
						})
					}
				});
			},
			onAuthError() {
				console.log('onAuthError')
			}
		},
		filters: {
			parsebirthday(birthday) {
				if (birthday == '') {
					return "1970-01-01"
				} else {
					return birthday
				}
			}
		}
	}
</script>

<style lang='scss'>

	.agreement {
		width: 710rpx;
		margin: 20rpx auto 0;
		background-color: #fff;

		.agreement_top {
			&::after {
				content: "";
				display: block;
				position: absolute;
				left: 32rpx;
				bottom: 0;
				width: 646rpx;
				height: 4rpx;
				background: #F5F7FA;
			}
		}

		.agreement {
			width: 100%;
			height: 108rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #333;
			padding: 0 10rpx 0 32rpx;
			box-sizing: border-box;
			position: relative;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.phoneWxBut {
		width: 160rpx;
		height: 60rpx;
		border: 1rpx solid #FF7800;
		border-radius: 44rpx;
		font-size: 28rpx;
		line-height: 60rpx;
	}

	.container {
		width: 100%;
		background-color: #fff;
		padding: 20rpx;

		.personalBack-box {
			width: 100%;
			background-color: #FFFFFF;

			.personalHead-box {
				width: 90%;
				border-bottom: 1upx solid #E5E5E5;
				padding-bottom: 20upx;
				margin-top: 36upx;

				.nameInput {
					text-align: right;
				}
			}

			.personalHead-box1 {
				width: 90%;
				margin-top: 36upx;
				padding-bottom: 20upx;

				.user-headImg {
					width: 120upx;
					height: 112upx;
					border-radius: 50%;
				}
			}
		}

		.iphoneNumback-box {
			width: 100%;
			background-color: #FFFFFF;
			height: 100upx;
			margin-top: 20upx;

			.iphoneNum-box {
				width: 90%;

				.verifyPhone {
					color: #EFB257;
					font-size: 30upx;
					border: 0;
				}
			}
		}

		.exitLoginBut {
			height: 100upx;
			background: #EFB257;
			border-radius: 20px;
			color: #FFEBC4;
		}

		.cancellation {
			height: 100rpx;
			margin: 24rpx auto 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #EFB257;
			font-size: 28rpx;
			background: #FFFFFF;
			border: 3rpx solid #F3F4F5;
		}

		.sexRadio-box {
			width: 520upx;
			height: 328upx;

			.sexRadio {
				margin-top: 30upx;
				padding-bottom: 44upx;
			}
		}

		.headBox {
			background: #FFFFFF;
			padding: 25rpx 0;
			border-bottom: 1rpx solid #E5E5E5;
			.personalHead-box {
				width: 90%;
				margin: 0 auto;
			}

			.user-headImg {
				width: 120upx;
				height: 112upx;
				border-radius: 50%;
			}
		}
	}
</style>
